<#assign secSelect = JspTaglibs["http://www.casic304.cn/secSelect"] />
<#assign dicSelect = JspTaglibs["http://www.casic304.cn/dicSelect"]/>
<#assign fillDept=JspTaglibs["http://www.casic304.cn/fillDept"] />
<html>
<head>
    <meta charset="utf-8">
    <title>质量管理体系统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <style>
        .echarts-div #container{
            height: 500px;margin-right: 36px
        }
        .echarts-div #containerZhexian{
            height: 500px;
        }
        .echarts-div{
            position: absolute;top: 100px;left: 16px;right: 16px; bottom: 16px;overflow: auto;
            padding-top: 16px;
        }
        @media screen and (min-width: 1280px){
            .chartDiv{
                width: 45%;
                float: left;
            }
        }
        @media screen and (min-width: 804px) and (max-width:1280px){
            .chartDiv {
                width: 96%;
                float: left;
            }
        }
        @media screen and (min-width: 704px) and (max-width:1380px){
            .chartParDiv {
               top:138px
            }
            #containerZhexian{margin-top: 16px}
        }
        .selch .layui-icon-date {
            top: 6px !important;
        }
    </style>
</head>
<body class="listBody">
<div class="qbdms-list">
    <div class="layui-table-view-body" style="padding: 14px;height: 100%;position: relative">
        <div class="ccpui-enterSel">
            <form class="layui-form" action="" lay-filter="wQbdQualitymanageStatisticsQueryForm">
                <div class="layui-form-body selch">
                    <div class="table-top-filter layui-row">
                        <div class="qbdms-listForm">
                            <label class="layui-form-label">统计年份</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input dateTimeFiled filter-value start_time1"
                                       name="Q_fAudittime_S" readonly lay-verify="required" value="${nowyear}" id="Q_fAudittime_DL"
                                       placeholder="请输入"/>
                            </div>
                        </div>
<!--                        <div class="qbdms-listForm">-->
<!--                            <label class="layui-form-label">导出图片格式</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <select name="imageFormat" autocomplete="off"-->
<!--                                        class="layui-input" fieldname="imageFormat"-->
<!--                                        lay-filter="imageFormat" id="imageFormat" lay-verify="required">-->
<!--                                    <option value="JPEG">JPEG</option>-->
<!--                                    <option value="PNG">PNG</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="selchBtn">
                            <a class="layui-btn layui-btn-sm fillBtn" lay-filter="query" lay-event="query" lay-submit qbdms-event="query" id="query">
                                <i class="layui-icon layui-icon-search"></i><span>查询</span>
                            </a>
                            <div class="layui-btn-group">
                                <button type="reset" class="layui-btn layui-btn-sm" lay-filter="clears" lay-event="clears" qbdms-event="clears" style="width: 28px;font-size: 12px;padding: 0">
                                    <i class="iconfont data-iconcommon_refresh"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="echarts-div chartParDiv">
            <div id="chart1" style="width: 600px;height:400px;     float: left;" ></div>
            <div id="chart2"  style="width: 600px;height:400px;    float: left;"></div>
            <div id="chart3"  style="width: 600px;height:400px;      float: left; "></div>

            <div id="chart4"  style="width: 600px;height:400px;      float: left; "></div>
            <div style="cursor: pointer;float: left;width: 25px;height: 25px;position: relative;left: -50px;"><i class="layui-icon layui-icon-return" id='return-button' style="font-size:22px;"></i></div>
        </div>
    </div>
</div>

<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/qbdmsStatic/public/echarts.min.js"></script>
<script>

    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table', 'common','jquery','layer','laydate','publicMethods', 'qbdmsForm','propsHandle'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.qbdmsForm;
        var publicMethods=layui.publicMethods;
        // 基于准备好的dom，初始化echarts实例
        var propsHandle = layui.propsHandle;
        var defProps = {
                //viewMould: 'form/formDef/view/formDesign/moulds/', // 组件模块 存放文件 *****
                viewMould: 'moulds/', // 组件模块 存放文件 *****
                selectorBtn: '.selectorBtn'
            },
            temQuery = new propsHandle();  // 实例化模板功能部分
        temQuery.initTem({
            selectorBtn: defProps.selectorBtn,
            selectorTemPath: setter.views + defProps.viewMould
        });
        form.render();
        var dateTimeFiledLen = $(".dateTimeFiled");
        for(var i=0;i<dateTimeFiledLen.length;i++){
            laydate.render({
                elem: dateTimeFiledLen[i] //指定元素
                ,type: 'year'
                ,trigger: 'click'
            });
        }
        form.on('submit(query)',function () {
            var data1 = form.val("wQbdQualitymanageStatisticsQueryForm");
            getData(data1);
        })

        //关闭当前页面
        $("#closeWindow").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        })

        var myChart1 = echarts.init(document.getElementById('chart1'));
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var myChart3 = echarts.init(document.getElementById('chart3'));
        var myChart4 = echarts.init(document.getElementById('chart4'));

        // 默认打开后显示当前年
        init();
        function init(){
            var data1 = form.val("wQbdQualitymanageStatisticsQueryForm");
            getData(data1);
        }
        /**
         * 获取数据
         * */
        function getData(parm){
            $.ajax({
                url: serverPath.qbdmsPath + '/qbdms/wQbdQualitymanageStatistics/getChartData',
                data:parm ,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (res) {
                        var fAudittypeSta=res.data.fAudittypeSta;
                        var fUnqualifiednatureSta=res.data.fUnqualifiednatureSta;
                        var fTrialunitnameSta=res.data.fTrialunitnameSta;
                        var getFstandardclause=res.data.getFstandardclause;
                        chartbt(fAudittypeSta);
                        chartbt2(fUnqualifiednatureSta);
                        chartzz(fTrialunitnameSta);
                        chartbztk(getFstandardclause);
                }
            })
        }
        //饼图按审核类型统计
        function chartbt(data) {
            var  option1 = {
                title: {
                    text: data.date+'审核不符合项按审核类型统计',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: data.legend_data
                },
                series: [
                    {
                        name: '审核不符合项按审核类型',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:data.series_data
                    }
                ]
            };
            myChart1.setOption(option1);
        }

        //饼图按不符合性质
        function chartbt2(data) {
            var option2 = {
                title: {
                    text: data.date + '审核不符合项-不符合项性质比例统计',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.legend_data
                },
                series: [
                    {
                        name: '不符合项性质',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.series_data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
        }

        //按受审单位维度统计
        function chartzz(data) {
           var  option3 = {
               title: {
                   text: data.date + '年审核不符合项按单位统计',
                   subtext: '',
                   left: 'center'
               },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.series_data,
                        // axisLabel:{interval:0},
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.legend_data
                    }
                ]
            };
            myChart3.setOption(option3)
        }

        //按标准条款统计
        function chartbztk(data) {
            var  option4 = {
                title: {
                    text: data.date + '年审核不符合项按单位条款统计',
                    subtext: '',
                    left: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: data.series_data,
                        // axisLabel:{interval:0},
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: data.legend_data
                    }
                ]
            };
            myChart4.setOption(option4)
        }


        var flag=true;
        myChart4.on('click',flag,function(params){
            if(flag){
                var name=params.name
                var p={
                    fstandardclause:name
                }
                var data1 = form.val("wQbdQualitymanageStatisticsQueryForm");
                var obj = Object.assign(p, data1);
                myChart4.clear();
                $.ajax({
                    url: serverPath.qbdmsPath + '/qbdms/wQbdQualitymanageStatistics/getChartData',
                    data: obj ,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        var fsubstandardclauses=res.data.fsubstandardclauses;
                        fillNewData(myChart4,fsubstandardclauses);
                    }
                })
                flag=false;
            }
        })

        /**
         * 下钻的数据
         * @param echartsBox
         * @param optionData
         */
        function fillNewData(echartsBox,optionData){
            var  option5 = {
                title: {
                    text: optionData.date+'年审核不符合项按单位子标准条款统计',
                    subtext: '',
                    left: 'center'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: optionData.series_data,
                        // axisLabel:{interval:0},
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        clickable:false,
                        type: 'bar',
                        barWidth: '60%',
                        data: optionData.legend_data
                    }
                ]
            };

            echartsBox.setOption(option5)

        }


        // test 的点击事件
        $("#return-button").click(function(){
            var data1 = form.val("wQbdQualitymanageStatisticsQueryForm");
            myChart4.clear();
            getData4(data1);
            flag=true;
        });
        /**
         * 获取数据
         * */
        function getData4(parm){
            $.ajax({
                url: serverPath.qbdmsPath + '/qbdms/wQbdQualitymanageStatistics/getChartData',
                data:parm ,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (res) {
                    var getFstandardclause=res.data.getFstandardclause;
                    chartbztk(getFstandardclause);
                }
            })
        }
    });
</script>
</body>
</html>